<template>
  <div class="login-view">
    <div class="background-cover">
      <span v-for="i in 10" :key="i" class="background-cover-circle"></span>
      <p style="position: absolute; bottom: 0; right: 1rem;">Copyright &copy; 2023 QCBlog.</p>
    </div>
    <div class="login">
      <div class="login-board">
        <div class="title">
          Sign up
        </div>
        <el-form
          size="large"
          status-icon
          ref="registerFormRef"
          :rules="rules"
          :model="registerForm"
        >
          <el-form-item prop="id">
            <el-input v-model="registerForm.id" placeholder="ID" :prefix-icon="User" class="input"/>
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="registerForm.name" placeholder="Name" :prefix-icon="UserFilled" class="input"/>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="registerForm.email" placeholder="Email" :prefix-icon="Message" class="input"/>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input v-model="registerForm.pass" placeholder="Password" show-password :prefix-icon="Unlock" class="input"/>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input v-model="registerForm.checkPass" placeholder="Confirm Password" show-password :prefix-icon="Unlock" class="input"/>
          </el-form-item>
          <el-form-item style="margin-bottom: 0;">
            <el-button color="#4dcdef" size="large" class="button" @click="SignUp">
              <span class="button_text">Sign up</span>
            </el-button>
          </el-form-item>
          <p class="or">or</p>
          <el-form-item>
            <el-button color="#e15958" size="large" class="button" @click="goToSignIn">
              <span class="button_text">Sign in</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message, Unlock, User, UserFilled } from '@element-plus/icons-vue';
import { ElNotification } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { register } from '../api/api'
import { encryptDES } from '../features/Des';

const registerForm = ref({
  id: '',
  name: '',
  email: '',
  pass: '',
  checkPass: ''
})

// 俩按钮功能
const router = useRouter()
const goToSignIn = () => router.push({name: 'login'})
const SignUp = () => {
  submitForm(registerFormRef)
}

// 验证表单数据
const registerFormRef = ref()
// 验证两次密码
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (registerForm.value.checkPass !== '') {
      if (!registerFormRef.value) return
      registerFormRef.value.validateField('checkPass', () => null)
    }
    setTimeout(() => {
      // 验证密码只能包含字字母、数字、下划线
      let reg = /^\w+$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('Only numbers, letters, and underscores (_)'))
      }
    }, 500);
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== registerForm.value.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}
// 验证ID只能包含字母、数字、下划线
const checkID = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('Please input the ID'))
  }
  setTimeout(() => {
    let reg = /^\w+$/
    if (reg.test(value)) {
      callback()
    } else {
      callback(new Error('Only numbers, letters, and underscores (_)'))
    }
  }, 500)
}
// 验证邮箱格式
const checkEmail = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('Please input the Email'))
  }
  setTimeout(() => {
    let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
    if(reg.test(value)) {
      callback()
    } else {
      callback(new Error('Email format error'))
    }
  }, 500);
}
// ruls
const rules = ref({
  id: [
    { validator: checkID, trigger: 'blur' },
    { min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur'}
  ],
  name: [
    { required: true, message: 'Please input the Name', trigger: 'blur' },
    { min: 3, max: 20, message: 'Length should be 3 to 20', trigger: 'blur' }
  ],
  email: [{ validator: checkEmail, trigger: 'blur' }],
  pass: [
    { validator: validatePass, trigger: 'blur' },
    { min: 6, max: 20, message: 'Length should be 6 to 20', trigger: 'blur' }
  ],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})
// submit
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.value.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      goToRegister()
    } else {
      // console.log('error submit!')
      return false
    }
  })
}
// 提交注册数据
const goToRegister = () => {
  // des加密
  let password = encryptDES(registerForm.value.pass)
  // 提交注册数据
  register(
    registerForm.value.id,
    registerForm.value.name,
    registerForm.value.email,
    password
  ).then(response => {
    if (response.status == 201) {
      router.push({name: 'login'})
      ElNotification({
        title: '注册成功',
        message: response.data.name + '，快去登录吧！ヽ(✿ﾟ▽ﾟ)ノ',
        type: 'success'
      })
    } else {
      ElNotification({
        title: '注册失败',
        message: '请重新注册 Σ(っ °Д °;)っ',
        type: 'error'
      })
    }
  }).catch(error => {
    console.log(error)
    if (error.response.status == 500) {
      ElNotification({
        title: '注册失败',
        message: '该ID已被使用 Σ( ° △ °|||)︴',
        type: 'error'
      })
    } else {
      ElNotification({
        title: '注册失败',
        message: error.message,
        type: 'error'
      })
    }
  })
}
</script>

<style scoped>
.login-view {
  height: 100vh;
  width: 100vw;
  background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png) no-repeat fixed;
  background-size: cover;
}
.background-cover {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 0);
  background-size: 3px 3px;
  background-repeat: repeat;
  position: absolute;
}
.login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-board {
  height: 38rem;
  width: 25rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 1rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.login-board .title {
  flex: 1;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
}
.login-board .input {
  height: 2.8rem;
  font-size: .9rem;
}
.login-board .button {
  width: 100%;
  box-shadow: var(--el-box-shadow-light);
}
.button_text {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
}
.or {
  text-align: center;
  font-weight: 600;
  color: #A8ABB2;
}
.or::before {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  position: relative;
  vertical-align: middle;
  background: linear-gradient(90deg,transparent,hsla(0,0%,45.9%,.4),hsla(0,0%,45.9%,.4));
  right: .5em;
  margin-left: -50%;
}
.or::after {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  width: 30%;
  height: 1px;
  position: relative;
  vertical-align: middle;
  background: linear-gradient(90deg,hsla(0,0%,45.9%,.4),hsla(0,0%,45.9%,.4),transparent);
  left: .5em;
  margin-right: -50%;
}

.background-cover-circle {
  position: absolute;
  border-radius: 50%;
}

.background-cover-circle:nth-child(1) {
  height: 150px;
  width: 150px;
  bottom: auto;
  left: -4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(2) {
  height: 50px;
  width: 50px;
  top: 10%;
  right: 4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(3) {
  height: 50px;
  width: 50px;
  top: 280px;
  right: 5.66666%;
  background: rgba(255, 255, 255, .3);
}
.background-cover-circle:nth-child(4) {
  height: 75px;
  width: 75px;
  top: 320px;
  right: 7%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(5) {
  height: 100px;
  width: 100px;
  top: 38%;
  right: auto;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
.background-cover-circle:nth-child(6) {
  width: 200px;
  height: 200px;
  top: 44%;
  right: auto;
  left: 10%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(7) {
  height: 50px;
  width: 50px;
  right: 36%;
  bottom: 50%;
  background: rgba(255, 255, 255, .04);
}
.background-cover-circle:nth-child(8) {
  height: 100px;
  width: 100px;
  right: 2%;
  bottom: 70px;
  background: rgba(255, 255, 255, .2);
}
.background-cover-circle:nth-child(9) {
  height: 50px;
  width: 50px;
  right: 2%;
  bottom: 1%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(10) {
  height: 100px;
  width: 100px;
  right: auto;
  bottom: 1%;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
</style>